var path = require('path');
const WebpackSpritesmithPlugin = require('webpack-spritesmith')

module.exports = {
    // ...
    mode: 'none',
    entry: './main.js',
    module: {
        rules: [
            {
                test: /\.less$/, use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.png$/, use: [
                    'file-loader?name=i/[hash].[ext]'
                ]
            }
        ]
    },
    resolve: {
        modules: ["node_modules", "spritesmith-generated"]
    },
    plugins: [
        // 雪碧图插件
        new WebpackSpritesmithPlugin({
            // 目标小图标
            src: {
                // 小图标路径
                cwd: path.join(__dirname, 'src/ico'),
                // 匹配小图标文件后缀名
                glob: '*.png'
            },
            target: {
                // 生成雪碧图(大图)文件存放路径
                image: path.join(__dirname, 'dist/sprites/sprite.png'),
                // 对应的样式文件存放路径
                css: path.join(__dirname, 'dist/sprites/sprites.less')
            },
            // 样式文件中,调用雪碧图的写法????
            apiOptions: {
                cssImageRef: '../sprites/sprite.png'
            },
            // 雪碧图生成算法
            spritesmithOptions: {
                algorithm: 'top-down', // 从上到下生成方向.
                padding: 4// 每个小图标之间的间隙
            }
        })
    ]



















    // module: {
    //     rules: [
    //         {test: /\.less$/, use: [
    //             'style-loader',
    //             'css-loader',
    //             'less-loader'
    //         ]},
    //         {test: /\.png$/, use: [
    //             'file-loader?name=i/[hash].[ext]'
    //         ]}
    //     ]
    // },
    // resolve: {
    //     modules: ["node_modules", "spritesmith-generated"]
    // },
    // plugins: []
    // ...
};